<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      height="250px"
    >
      <el-table-column prop="university" label="报考大学" width="200" />
      <el-table-column prop="major" label="专业" width="200" />
      <el-table-column prop="cutoffScore" label="分数线" width="200" />
    </el-table>
  </template>
  
  <script lang="ts" setup>
  interface UniversityData {
    university: string
    major: string
    cutoffScore: number
  }
  
  const tableRowClassName = ({
    rowIndex,
  }: {
    row: UniversityData
    rowIndex: number
  }) => {
    if (rowIndex < 3) {
      return 'danger-row'
    } else if (rowIndex < 6) {
      return 'success-row'
    } else {
      return 'info-row'
    }
  }
  
  const tableData: UniversityData[] = [
    { university: '清华大学', major: '计算机科学', cutoffScore: 750 },
    { university: '北京大学', major: '工程学', cutoffScore: 740 },
    { university: '复旦大学', major: '物理学', cutoffScore: 730 },
    { university: '上海交通大学', major: '数学', cutoffScore: 720 },
    { university: '中国科学技术大学', major: '经济学', cutoffScore: 710 },
    { university: '浙江大学', major: '生物学', cutoffScore: 705 },
    { university: '南京大学', major: '化学', cutoffScore: 695 },
    { university: '武汉大学', major: '心理学', cutoffScore: 690 },
    { university: '中山大学', major: '历史学', cutoffScore: 680 },
  ]
  </script>
  
  <style>
  .el-table .danger-row {
    background-color: #ffcccc; /* 红色背景 */
  }
  
  .el-table .success-row {
    background-color: #ccffcc; /* 绿色背景 */
  }
  
  .el-table .info-row {
    background-color: #cce5ff; /* 蓝色背景 */
  }
  </style>
  